<template>
  <div class="detail_container">
    <!--<Modal :closable="false" :mask-closable="false" v-model="showModel"></Modal>-->
    <div @click="getPdf(),print()" @mouseenter="display" id="save">保存</div>
    <div id="pdfDom">
      <div class="detail_basic_info">
        <!--{{details}}-->
        <p class="detail_basic">基本信息</p>
        <p class="detail_item">
        <span class="item_info">
          <span>病历号：</span>
          <span>{{result.id}}</span>
        </span>
          <span class="item_info">
          <span>姓名：</span>
          <span>{{result.name}}</span>
        </span>
          <span class="item_info">
        <span>电话：</span>
        <span>{{result.phone}}</span>
        </span>
        </p>
        <p class="detail_item">
      <span class="item_info">
      <span>性别：</span>
      <span>{{result.gender}}</span>
      </span>
          <span class="item_info">
      <span>年龄：</span>
      <span>{{result.age}}</span>
      </span>
          <span class="item_info">
      <span>出生日期：</span>
      <span>{{result.birth_date}}</span>
      </span>
          <!--<span class="item_info">-->
          <!--<span>民族：</span>-->
          <!--<span>汉</span>-->
          <!--</span>-->
        </p>
        <p class="detail_item">
      <span class="item_info">
      <span>身份证号：</span>
      <span>{{result.identify_num}}</span>
      </span>
          <span class="item_info">
      <span>住址：</span>
      <span>{{result.birth_place}}</span>
      </span>
        </p>
        <p class="detail_item">
          <span>家族病史：</span>
          <span>{{result.medical_history}}</span>
        </p>
        <!--<p class="detail_item">-->
        <!--<span class="item_info">-->
        <!--<span>左眼视力：</span>-->
        <!--<span>4.8</span>-->
        <!--</span>-->
        <!--<span class="item_info">-->
        <!--<span>右眼视力：</span>-->
        <!--<span>4.9</span>-->
        <!--</span>-->
        <!--</p>-->
      </div>

      <div style="border-bottom: 1px dashed rgb(209,209,209);margin-bottom: 20px">
        <p class="detail_basic">眼底图像</p>
        <p class="detail_img"><img :src="result.url" alt="" style="width: 100%;"></p>
      </div>

      <div class="detail_img_result">
        <!--<div><img src="../../assets/image/5.jpg" alt=""></div>-->
        <div class="detail_img_info">
          <p class="detail_img_feature">眼底特征</p>
          <div class="detail_item_container">
            <!--<p class="title">杯盘检测</p>-->
            <!--<p class="detail_img_item">-->
            <!--<span class="one">杯盘比</span>-->
            <!--<span class="two">{{isdr}}</span>-->
            <!--&lt;!&ndash;<span class="one">下颧间距  血管分割图  微动脉瘤检测（个数） 视盘定位图 </span>&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="two">0</span>&ndash;&gt;-->
            <!--</p>-->
            <!--<p class="detail_img_item">-->
            <!--<span class="one">鼻间距</span>-->
            <!--<span class="two">0</span>-->
            <!--<span class="one">颧间距</span>-->
            <!--<span class="two">0</span>-->
            <!--</p>-->
          </div>

          <div class="detail_item_container">
            <p class="title">微动脉瘤</p>
            <p class="detail_img_item">
              <span class="one">个数</span>
              <span class="two">{{masNum}}</span>
              <!--<span class="one">下颧间距</span>-->
              <!--<span class="two">0</span>-->
            </p>
            <p class="detail_img_item">
              <!--<span class="one">鼻间距</span>-->
              <!--<span class="two">0</span>-->
              <!--<span class="one">颧间距</span>-->
              <!--<span class="two">0</span>-->
            </p>
          </div>
        </div>
      </div>

      <div class="detail_conclusion">
        <p>机器诊断结果：{{result.isDr==1?'有可能患有糖网病':'无糖网病'}}</p>
      </div>

      <div class="detail_images">
      <span style="margin: auto">
        <img :src="result.vessel" alt="">
        <em style="font-style: normal">血管分割图</em>
      </span>
        <span style="margin: auto">
        <img :src="result.mass_vessel" alt="">
        <em style="font-style: normal">微动脉瘤检测</em>
      </span>
        <span>
      <img :src="result.odlocation" alt="">
      <em style="font-style: normal">视盘定位图</em>
      </span>
      </div>
    </div>

    <!--<div>-->
    <!--<img :src="imgUrl" alt="" style="width: 500px;">-->
    <!--<em>{{result}}</em>-->
    <!--</div>-->


    <!--<textarea name="" id="" cols="30" rows="10" class="add_detail" v-model="added_detail"></textarea>-->
    <!--<div class="submit_detail"><button @click="submit(added_detail)">提交</button></div>-->
  </div>
</template>

<script>
  import axios from 'axios';
  // import {apiPre} from ;
  import {apiPre} from "../js/config";
  // import event from '../main/component/event';

  export default {
    name: "detail",
    data() {
      return {
        showModel: true,
        htmlTitle: '',
        // details: window.location.href.split('/').pop(),
        // added_detail: '',
        // imgUrl: '',
        // result: '',
        // userId: '',
        // userName: '',
        // // vesselImg: require('../../assets/image/666_vessel.png'),
        // vesselImg: '',
        // // massvesselImg: require('../../assets/image/666_maslabels.jpg'),
        // massvesselImg: '',
        // // origin: require('../../assets/image/4.jpg'),
        // origin: '',
        // odlocation: '',
        // isdr: 0,
        masNum: 2,
        result:
          {
            // id: '',
            // isDr: '',
            // vessel: '',
            // mass_vessel: '',
            // phone: '',
            // name: '',
            // identify_num: '',
            // gender: '',
            // age: '',
            // birth_palce: '',
            // birth_date: '',
            // medical_history: ''
          }
      }
    },
    created: function () {
      // alert(window.location);
      console.log('window.location', window.location);
      console.log('this.$route', this.$route.params);

    },
    methods: {
      submit(msg) {
        console.log(msg);
        window.close();
      },
      display() {

      },
      print(){
        window.print()
      }
    },
    mounted() {
      // this.$Loading.start();

      // this.$Spin.show({
      //   render: (h) => {
      //     return h('div', [
      //       h('Icon', {
      //         'class': 'demo-spin-icon-load',
      //         props: {
      //           type: 'ios-loading',
      //           size: 50
      //         }
      //       }),
      //       h('div', {style: {color: '#fff', fontSize: '20px'}}, '筛查中...')
      //     ])
      //   }
      // });


      axios.get(apiPre + 'detail', {params: {id: this.$route.params.id}}).then((res) => {
        console.log(res)
        this.result = res.data.data;
        this.htmlTitle = this.result.name;
        console.log('this.htmlTitle', this.htmlTitle)
        // this.$Loading.finish();
        console.log('this.result', this.result);
      }).catch((err) => {
        console.log(err)
        // alert(err)
        alert(err)
      })
    }
  }
</script>

<style lang="scss" scoped>
  /*@import "./detail";*/

  .detail_container {
    padding: 0 10%;
  }

  .detail_basic_info {
    border-bottom: 1px solid rgb(209, 209, 209);
  }

  .detail_item {
    /*display: flex;*/
    /*justify-content: space-between;*/
    margin-bottom: 5px;
    .item_info {
      display: inline-block;
      width: 33%;
    }
  }

  .detail_basic {
    font-size: 20px;
    margin: 10px 0;
  }

  .detail_img {
    text-align: center;
  }

  .detail_img_result {
    display: flex;
    /*border-bottom: 1px dashed rgb(209, 209, 209);*/
    margin-bottom: 20px;
    img {
      border: 1px solid rgb(209, 209, 209);
      width: 400px;
      height: 400px;
    }
  }

  .detail_img_info {
    /*margin-left: 20px;*/
    width: 70%;
    margin-bottom: 20px;
  }

  .detail_img_feature {
    font-size: 18px;
    font-weight: 300;
  }

  .detail_img_item {
    display: flex;
    border-bottom: 1px solid rgb(217, 218, 220);
    span {
      display: inline-block;
      width: 50%;
    }
    .two {
      text-align: center;
      border-right: 1px solid rgb(217, 218, 220);
    }
    .one {
      border-right: 1px solid rgb(217, 218, 220);
      padding-left: 5px;
      &:last-child {
        border-right: none;
      }
    }
  }

  .detail_item_container {
    border: 1px solid rgb(209, 209, 209);
    .title {
      background-color: rgb(145, 144, 155);
      padding-left: 5px;
    }
  }

  .detail_images {
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgb(209, 209, 209);
    span {
      border: 1px solid rgb(209, 209, 209);
      width: 50%;
      text-align: center;
      img {
        width: 100%;
        /*height: 500px;*/
      }
    }
  }

  .detail_conclusion {
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgb(209, 209, 209);
    font-size: 20px;
  }

  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
    font-size: 50px !important;
    color: #fff;
  }

  /*.ivu-spin-fix {*/
  /*background-color: rgba(55, 55, 55, 0.6);*/
  /*}*/
</style>
